<template>
    <HeaderBar :title="$t('plan.detail.title')" type="router" @toBack="toBack" />
    <view class="plan-detail-container main-container">
        <view class="plan-status-wrap">
            <view class="status">{{ detail.state === 0 && percentage < 100 ? $t('plan.pending') : $t('plan.completed') }}</view>
            <view class="icon">
                <wd-icon name="time" size="80rpx" color="#fff"></wd-icon>
            </view>
        </view>
        <view class="section-title">{{$t('plan.detail.advertising')}}</view>
        <view class="put-goods">
            <view class="icon">
                <image :src="detail.goodsPic" />
            </view>
            <view class="content">
                <view class="name">{{ detail.goodsName }}</view>
                <view class="desc">{{$t('plan.games')}}</view>
                <view class="tips">{{$t('plan.detail.innersloth')}}</view>
            </view>
            <view class="link" @click="toDeail">{{$t('plan.detail.view')}}</view>
        </view>
        <view class="data-view">
            <view class="title-wrap">
                <view class="name">{{$t('home.dataOverview')}}</view>
                <view class="desc">
                    {{$t('home.dataUpdates')}}
                    <wd-icon name="refresh" color="#0866ff" size="20rpx" @click="getPercentage(true)"></wd-icon>
                </view>
            </view>
            <view class="app-list">
                <view class="item">
                    <view class="num">$ {{ formatAmount(orderInfo.orderAmount) }}</view>
                    <view class="content">
                        <view class="name">{{$t('home.investmentAmount')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app1.jpg" />
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="num">{{ percentage }} %</view>
                    <view class="progress"><wd-progress hide-text :duration="5" :percentage="percentage" /></view>
                    <view class="content">
                        <view class="name">{{$t('plan.progress')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app2.jpg" />
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="num">
                        $ {{ detail.state !== 0 ? formatAmount(orderInfo.orderAmount) : formatAmount(consumedAmount) }}
                    </view>
                    <view class="content">
                        <view class="name">{{$t('home.consumed')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app3.jpg" />
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="num">$ {{ detail.state !== 0 ? '0.00' : formatAmount(beConsumedAmount) }}</view>
                    <view class="content">
                        <view class="name">{{$t('home.toBeConsumed')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app4.jpg" />
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="num">{{ orderInfo.showCount }}</view>
                    <view class="content">
                        <view class="name">{{$t('home.impressions')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app5.jpg" />
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="num">{{ orderInfo.clickCount }}</view>
                    <view class="content">
                        <view class="name">{{$t('home.clicks')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app6.jpg" />
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="num">$ {{ formatAmount(orderInfo.revenueAmount) }}</view>
                    <view class="content">
                        <view class="name">{{$t('home.advertising')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app7.jpg" />
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="num">$ {{ formatAmount(orderInfo.rebateAmount) }}</view>
                    <view class="content">
                        <view class="name">{{$t('home.profit')}}</view>
                        <view class="icon">
                            <image mode="heightFix" src="@/static/icon/app8.jpg" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- <view class="section">
            <view class="section-title">Advertising Content</view>
            <view class="banner">
                <image mode="widthFix" src="@/static/icon/plan_banner.jpg" />
            </view>
            <view class="plan-text">
                A game of teamwork and betrayal ...in space! Play online with 4-15 players as you attempt to prep your
                spaceship for departure, but beware as one or more random players among the Crew are Impostors bent on
                killing everyone. MASTER YOUR SOCIAL DEDUCTION SKILLS. Crewmates win by completing all tasks or
                discovering and voting the Impostors off the ship. The Impostor can use sabotage to cause chaos, making
                for easier kills and better alibis. Optional roles create a whole new level of gameplay. Try out the
                Scientist, Engineer, Guardian Angel, or Shapeshifter to create chaos! Think you’re a master of
                deception? Only one way to find out! CUSTOMIZE YOUR GAME. Choose how you want to play! Change the number
                of Impostors, roles, tasks, player visibility, and more. Play in style as you change your Crewmates’
                color, visor, nameplate, outfit, and hat. More customization options are planned to be continually added
                in. PLAY WITH ANYONE. Cross-platform play is supported. Play with friends (or enemies?) between PC,
                mobile, or console!
            </view>
            <view class="put-wrap">
                <view class="put-item">
                    <view class="name">Promotional Link</view>
                    <view class="price">https://www.innersloth.com/games/among-us/</view>
                </view>
                <view class="put-item">
                    <view class="name">Ad Display Format</view>
                    <view class="price">Image</view>
                </view>
                <view class="put-item">
                    <view class="name">Conversion Method</view>
                    <view class="price">Landing Page</view>
                </view>
            </view>
        </view>
        <view class="section">
            <view class="section-title">Advertising Rules</view>
            <view class="put-wrap">
                <view class="put-item">
                    <view class="name">Ad Placement Strategy</view>
                    <view class="price">CPM</view>
                </view>
                <view class="put-item">
                    <view class="name">Ad Placement Cost</view>
                    <view class="price">Smart Optimization</view>
                </view>
                <view class="put-item">
                    <view class="name">Payment Method</view>
                    <view class="price">CPC</view>
                </view>
            </view>
        </view>
        <view class="section">
            <view class="section-title">User Targeting</view>
            <view class="put-wrap">
                <view class="put-item">
                    <view class="name">Location</view>
                    <view class="price">Global</view>
                </view>
            </view>
        </view>
        <view class="plan-time">
            <view class="name">Creation Time</view>
            <view class="time">28/08/2025 11:19:32</view>
        </view> -->
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onHide } from '@dcloudio/uni-app';
import HeaderBar from '@/components/HeaderBar';
import { getStorage, NavigateTo, showLoading, hideLoading, formatAmount } from '@/utils/common';
import { toLang } from '@/utils/lang';
import { formatDate } from '@/utils/date';
import moment from 'moment';
import { getOrderInfo } from '@/api/order';
let orderDetail = {} as any;

const detail = ref<any>({});
const orderInfo = ref({}) as any;
const percentage = ref(0) as any;
const consumedAmount = ref(0) as any;
const beConsumedAmount = ref(0) as any;
const timer = ref(null) as any;

onLoad(() => {
    detail.value = getStorage('orderDetail') || {};
    getLoad();
});

onHide(() => {
    if (timer.value) {
        timer.value = null;
        clearTimeout(timer.value);
    }
});

//初始化加载
const getLoad = async () => {
    const res = await getOrderInfo({ orderId: detail.value.id });
    if (res.code !== 200) {
        return;
    }
    let data = res.data;
    data.revenueAmount = data.orderAmount + data.rebateAmount;
    orderDetail = { ...data };
    orderInfo.value = data;
    getPercentage(false);
};

//获取进度
const getPercentage = (flag: boolean) => {
    if (flag) {
        showLoading({ title: toLang('common.loading') });
    }

    // 2. 将「创建时间字符串」转换为 Moment 对象（若格式特殊，需手动指定格式，避免解析错误）
    // 方式1：自动解析（适用于标准格式，如 ISO 8601、'YYYY-MM-DD HH:mm:ss'）
    const createTime = moment(formatDate(detail.value.createTime));

    // 3. 获取「当前时间」的 Moment 对象
    const currentTime = moment();

    // 4. 计算时间差（秒）：currentTime - createTime，单位指定为 'seconds'
    const timeDiffInSeconds = currentTime.diff(createTime, 'seconds');
    const clickCount = orderDetail.clickCount;
    const showCount = orderDetail.showCount;
    const orderAmount = orderDetail.orderAmount;
    const revenueAmount = orderDetail.revenueAmount;
    const rebateAmount = orderDetail.rebateAmount;
    if (flag) {
        setTimeout(() => {
            hideLoading();
        }, 500);
    }
    if (timeDiffInSeconds > detail.value.orderAmount * 1.5) {
        percentage.value = 100;
        orderInfo.value.clickCount = clickCount;
        orderInfo.value.showCount = showCount;
        beConsumedAmount.value = 0;
        consumedAmount.value = orderAmount;
        orderInfo.value.revenueAmount = revenueAmount;
        orderInfo.value.rebateAmount = rebateAmount;
        return;
    }
    const sum = timeDiffInSeconds / (detail.value.orderAmount * 1.5);
    percentage.value = Math.ceil(sum * 100);
    beConsumedAmount.value = Math.ceil(sum * orderAmount);
    consumedAmount.value = orderAmount - beConsumedAmount.value;
    orderInfo.value.clickCount = Math.ceil(sum * clickCount);
    orderInfo.value.showCount = Math.ceil(sum * showCount);
    orderInfo.value.revenueAmount = Math.ceil(sum * revenueAmount);
    orderInfo.value.rebateAmount = Math.ceil(sum * rebateAmount);
    autoRefresh();
};

//30s自动刷新进度
const autoRefresh = () => {
    if (percentage.value === 100 || detail.value.state !== 0) {
        return;
    }
    if (timer.value) {
        timer.value = null;
        clearTimeout(timer.value);
    }

    //30分钟自动刷新一次
    timer.value = setTimeout(() => {
        getPercentage(false);
    }, 1000 * 30);
};

//跳转详情
const toDeail = () => {
    NavigateTo('/pages/plan/productDetail');
};

//返回计划列表
const toBack = () => {
    NavigateTo('/pages/plan/index');
};
</script>

<style lang="scss">
.plan-detail-container {
    padding: 0 30rpx;
    .plan-status-wrap {
        display: flex;

        justify-content: space-between;
        background: #0866ff;
        border-radius: 22rpx;
        padding: 40rpx 60rpx;
        .status {
            font-size: 46rpx;
            color: #fff;
        }
        .icon {
            margin: 20rpx 0 10rpx;
        }
    }
    .section-title {
        margin-top: 40rpx;
        font-size: 32rpx;
    }
    .put-goods {
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        border-radius: 22rpx;
        background: #f0f2f5;
        padding: 30rpx;
        .icon {
            width: 170rpx;
            image {
                width: 140rpx;
                height: 140rpx;
                border-radius: 28rpx;
            }
        }
        .content {
            flex: 1;
            .name {
                font-size: 28rpx;
            }
            .desc {
                font-size: 20rpx;
                margin-top: 20rpx;
            }
            .tips {
                font-size: 20rpx;
                margin-top: 20rpx;
                color: #969799;
            }
        }
        .link {
            display: flex;
            width: 130rpx;
            font-size: 22rpx;
            justify-content: flex-end;
            color: #0866ff;
        }
    }
    .data-view {
        margin-top: 20rpx;
        padding: 0;
        .title-wrap {
            padding-bottom: 10rpx;
        }
        .app-list {
            .item {
                height: 160rpx;
            }
        }
    }
    .section {
        margin-top: 40rpx;
        .section-title {
            font-size: 32rpx;
        }
        .banner {
            margin-top: 30rpx;
            image {
                width: 100%;
            }
        }
        .plan-text {
            margin-top: 40rpx;
            font-size: 24rpx;
            line-height: 34rpx;
        }
        .put-wrap {
            margin-top: 40rpx;
            background: #f0f2f5;
            border-radius: 22rpx;
            padding: 20rpx 30rpx;
            .put-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24rpx;
                padding: 20rpx 0;
                .name {
                    width: 25%;
                }
                .price {
                    width: 60%;
                    word-break: break-all;
                    text-align: right;
                }
            }
        }
    }
    .plan-time {
        padding: 40rpx 0;
        display: flex;
        justify-content: space-between;
        .name {
            font-size: 32rpx;
        }
        .time {
            font-size: 28rpx;
            color: #646566;
        }
    }
}
</style>
